
<template>
  <div class="background">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      style="position: fixed; bottom: 0; width: 100%; height: 100%"
    ></vue-particles>
    <h1 style="color: #eaeaea">恭喜您评论成功！</h1>
    <br/>
    <h2 style="color: #eaeaea">您的评论已经存放在区块号: #{{ message }} 上</h2>
      <div class="lucky">
        <LuckyWheel
          ref="commentsuccess"
          width="400px"
          height="400px"
          :prizes="prizes"
          :default-style="defaultStyle"
          :blocks="blocks"
          :buttons="buttons"
          @start="startCallBack"
          @end="endCallBack"
        />
      </div>
  </div>
</template>

<script>
export default {
  name: "commentsuccess",
  data () {
    return {
      prizes: [],
      message: this.$route.query.index,
      defaultStyle: {
        fontColor: '#d64737',
        fontSize: '14px',
      },
      blocks: [
        { padding: '13px', background: '#d64737' }
      ],
      buttons: [
        { radius: '50px', background: '#d64737' },
        { radius: '45px', background: '#fff' },
        { radius: '41px', background: '#f6c66f', pointer: true },
        {
          radius: '35px', background: '#ffdea0',
          imgs: [{ src: require('../assets/button.png'), width: '60%', top: '-60%' }]
        }
      ],
    }
  },
  mounted () {
    this.getPrizesList()
  },
  methods: {
    getPrizesList () {
      const prizes = []
      let data = ['慕希安大礼包', '10元红包', '并夕夕提现100元', '原魔自选五星', '1元红包', '5元红包', '499元精品课程', '0.1元红包']
      data.forEach((item, index) => {
        prizes.push({
          name: item,
          background: index % 2 ? '#f9e3bb' : '#f8d384',
          fonts: [{ text: item, top: '10%' }],
          imgs:[],
        })
      })
      this.prizes = prizes
    },
    startCallBack () {
      this.$refs.commentsuccess.play()
      setTimeout(() => {
        this.$refs.commentsuccess.stop(Math.random() * 8 >> 0)
      }, 3000)
    },
    endCallBack (prize) {
      alert(`恭喜你获得${prize.name}`)
      this.$router.push("/");
    },
  }
}
</script>

<style scoped>
.background {
  background: url("../assets/bg3.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.lucky {
  position: absolute;
  top: 30%;
  left: 36%;
}
</style>
